<template>
    <div>
        <!-- 不定期缴费 -->
        <div class="container">
            <!-- 表单栏 -->
            <el-row class="form-container">
                <el-col :span="24">
                    <div class="choose-title lf">选择售票员</div>
                    <el-input v-model="id" placeholder="" class="lf sellerID-input" size="mini"></el-input>
                    <el-autocomplete v-model="seller" placeholder="" class="lf seller-input" size="mini" :fetch-suggestions="querySearch"></el-autocomplete>
                    <button class="check-btn form-btn lf sell-btn" @click="check"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询</button>
                </el-col>
            </el-row>
            <!-- 员工信息栏 -->
            <el-row class="msg-container">
                <el-col :span="24">
                    <div class="choose-title lf msg-input">[工号] 姓名：{{checkResult.no}}</div>
                    <div class="choose-title lf msg-input">应缴未缴：{{checkResult.notPay}}</div>
                    <div class="choose-title lf msg-input">对应缴款工号：{{checkResult.payNum}}</div>
                    <div class="choose-title lf">缴款金额：</div>
                    <el-input v-model="price" placeholder="" class="lf seller-input give-input" size="mini"></el-input><div class="choose-title lf">元</div>
                    <button class="check-btn form-btn rf sell-btn" @click="send"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">提交</button>
                </el-col>
            </el-row>
        </div>
        <!-- tab表格栏 -->
        <div class="tab-container">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="未结售票汇总单" name="first">
                    <avue-crud :data="unpayList.data" :option="unpayList.option" :page="unpayList.page" @current-change="payPage"></avue-crud>
                </el-tab-pane>
                <el-tab-pane label="缴款记录" name="second">
                    <avue-crud :data="jiLuList.data" :option="jiLuList.option" :page="jiLuList.page" @current-change="payPage"></avue-crud>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
        id:"",
        seller:"",
        price:"",
        checkResult:{
            no:"",
            usePay:"",
            notPay:"",
            payNum:"",
            insurance_sum:""
        },
        activeTab:"first",
        unpayList:{
            page: {
                pageSizes: [10],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                menu:false,
                page:true,
                index:true,
                column:[
                    {
                        label:"汇总单号",
                        prop:"salesumno"
                    },
                    {
                        label:"销售员",
                        prop:"seller_name"
                    },
                    {
                        label:"应缴",
                        prop:"payment"
                    },
                    {
                        label:"已缴",
                        prop:"is_payed"
                    },
                    {
                        label:"售票数",
                        prop:"sale_count"
                    },
                    {
                        label:"售票金额",
                        prop:"sale_sum"
                    },
                    {
                        label:"退票数",
                        prop:"refund_count"
                    },
                    {
                        label:"退还金额",
                        prop:"refund_sum"
                    },
                    {
                        label:"退票手续费",
                        prop:"refund_poundage"
                    },
                    {
                        label:"废票数",
                        prop:"del_count"
                    },
                    {
                        label:"废票金额",
                        prop:"del_sum"
                    },
                    {
                        label:"售优惠券数",
                        prop:"discount_bill_count"
                    },
                    {
                        label:"售优惠券金额",
                        prop:"discount_bill_sum"
                    },
                    {
                        label:"票据起始号",
                        prop:"begin_no"
                    },
                    {
                        label:"票据结束号",
                        prop:"end_no"
                    },
                    {
                        label:"打印次数",
                        prop:"print_count"
                    },
                    {
                        label:"最后打印用户",
                        prop:"last_print_oper"
                    },
                    {
                        label:"最后打印时间",
                        prop:"last_print_time"
                    },
                ]
            }
        },
        jiLuList:{
            page: {
                pageSizes: [10],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                menu:false,
                page:true,
                index:true,
                column:[
                    {
                        label:"批次号",
                        prop:"batch_no"
                    },
                    {
                        label:"售票员",
                        prop:"seller_name"
                    },
                    {
                        label:"缴纳金额",
                        prop:"payment"
                    },
                    {
                        label:"收款人",
                        prop:"creater_name"
                    },
                    {
                        label:"缴纳时间",
                        prop:"create_time"
                    },
                ]
            }
        },
        payers:[]
    };
  },
  methods: {
       querySearch(queryString, cb) {
        var payers = this.payers;
        var results = queryString ? payers.filter(this.createFilter(queryString)) : payers;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (payers) => {
          return (payers.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll(){
          this.postRequest("/sys/user/listWithSpell").then(data=>{
              for(var item of data.data){
                  this.payers.push({
                     value:item.name,
                     id:item.id
                  })
              }
          })
      },
      check(){
          this.getRequest("/fin/salesum/getSalesum?seller_id="+this.id).then(data=>{
              this.checkResult.no=data.data.no;
              this.checkResult.notPay=data.data.sale_sum+data.data.insurance_sum+data.data.discount_bill_sum-data.data.insurance_refund_sum-data.data.refund_sum-data.data.del_sum-data.data.payment;
              this.checkResult.payNum=data.data.no;
              this.price=data.data.payment;
          })
      },
      luPage(val){
          this.jiLuList.page.currentPage=val;
          this.getJiLuList();
      },
      getJiLuList(){
          this.postRequest("/fin/salesum/payment/list",{
              rows:10,
              page:this.jiLuList.page.currentPage
          }).then(data=>{
              this.jiLuList.page.total=data.data.totalRow;
              this.jiLuList.data=data.data.list;
          })
      },
      payPage(val){
          this.unpayList.page.currentPage=val;
          this.getUnpayList();
      },
      getUnpayList(){
          this.postRequest("/fin/salesum/list",{
              rows:10,
              page:this.unpayList.page.currentPage
          }).then(data=>{
              this.unpayList.page.total=data.data.totalRow;
              this.unpayList.data=data.data.list;
          })
      },
      send(){
          this.postRequest("/fin/salesum/payment/doPayment",{
              seller_id:this.id,
              payment:this.price,
              salesum_id:this.checkResult.payNum
          }).then(data=>{
              this.msgShow(data,function(){});
          })
      }
  },
  computed: {},
  components:{TableData},
  watch: {
      seller(){
          for(var item of this.payers){
              if(this.seller==item.value){
                  this.id=item.id
              }
          }
      }
  },
  mounted() {
    console.log("不定期缴费");
    this.$emit("sendActive", "4-1");
    this.loadAll();
    this.getUnpayList();
    this.getJiLuList();
  }
};
</script>
<style scoped src="../../assets/css/financeManage/payUntime.css">
</style>